import React, { useEffect, useMemo, useRef, useState } from 'react'
import './index.css'
import { NavBar, Input, Button, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
function Index() {
    const min = useRef(null)
    const navigate = useNavigate()
    const user_id = 1;
    const server_id = 2;
    const [value, setValue] = useState('')
    const [connect, setConnect] = useState({})

    const ws = useMemo(() => {
        return new WebSocket(
            `ws:113.44.139.133:8003/koa/ws?user_id=${user_id}&server_id=${server_id}`
        )
    }, [])

    useEffect(() => {
        min.current.scrollTop = 100000
    }, [connect])


    useEffect(() => {

        ws.onopen = () => {
            console.log('连接成功');
            JSON.stringify({ type: 'getChatList' })
        }

        ws.onmessage = (msg) => {


            const { type, message, data } = JSON.parse(msg.data)


            if (type === 'getChatList') {
                console.log(data);
                setConnect(data);
                Toast.show({
                    icon: 'success',
                    content: message,
                    duration: 1000
                })
            }
            else if (type === 'addMessage') {
                setConnect((prev) => [...prev, data])
            }
        }
    }, [])

    const handlesend = () => {
        if (value.trim() === '') {
            Toast.show({
                icon: 'fail',
                content: '请输入内容',
                duration: 1000
            })
        }

        ws.send({
            type: 'addMessage',
            data: {
                user_id,
                server_id,
                message: value
            }
        })

        setValue('')
    }
    return (
        <div className='box-wroe'>
            <NavBar onBack={() => navigate(-1)}>聊天页</NavBar>
            <div className='main-wroe' ref={min}>
                {/* {
                    connect?.map((item, ind) => {
                        const chatItem =
                            item.dir === 1 ? 'item-right' : 'item-left'
                        const chatavatar =
                            item.dir === 1 ? item.user_avatar : item.server_avatar

                        return () => {
                            <div key={ind} className={chatItem}>
                                <img src={chatavatar} alt="" />
                                <div>
                                    <div className='message'>{item.message}</div>
                                </div>
                            </div>
                        }
                    })
                } */}
            </div>
            <div className='footer-wroe'>
                <Input
                    placeholder='请输入内容'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                />
                <Button
                    color='primary'
                    fill='solid'
                    onClick={() => handlesend()}
                >
                    发送
                </Button>
            </div>
        </div>
    )
}

export default Index
